<template>
    <div class="special-blog">
        <info-tree @getTreeBlogId="getTreeBlogId" v-motion-slide-left></info-tree>
        <BlogDetails :blogInfo="blogInfo" v-motion-slide-top></BlogDetails>
        <div class="blog-toc" v-if="tocConfig.tocArray.length > 0"   v-motion-slide-right >
            <div class="toc-head">
                <div class="title">目录</div>
                <!-- <a-button type="primary" shape="circle"> -->
                <!-- <template #icon><PoweroffOutlined /></template> -->
                <!-- </a-button> -->
            </div>
            <div class="toc-main">
                <div v-for="(item, index) in tocConfig.tocArray" :key="index" class="toc-item">
                    <a :href="'#' + item.id" class="toc-item" :style="{ 'padding-left': (item.level * 15) + 'px' }">{{
                            item.title
                    }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, nextTick, ref } from "vue";
import hljs from "highlight.js";
import "highlight.js/styles/atom-one-light.css"; //样式
import InfoTree from './InfoTree.vue';
import BlogDetails from "@/components/blog-details.vue";
const { proxy } = getCurrentInstance();
const api = {
    getBlogDetail: "/view/getBlogDetail",
    loadCategory: "/view/loadCategory",
};
const tocConfig = ref({
    show: true,
    tocArray: []
}) 
const blogInfo = ref({});
const getBlogDetail = async (id) => {
    let result = await proxy._request({
        url: api.getBlogDetail,
        params: {
            blogId: id
        },
    });
    if (!result) {
        return;
    }
    blogInfo.value = result.data;
    makeToc();
    highlightCode()
};

const makeToc = () => {
    nextTick(() => {
        tocConfig.value.tocArray = []
        // 定义参与目录生成的标签
        const tocTags = ["H1", "H2", "H3", "H4", "H5", "H6"];
        // 获取所有标题标签
        let contentDom = document.querySelector("#content");
        const childNodes = contentDom.childNodes;
        let index = 0;
        childNodes.forEach((item) => {
            let tagName = item.tagName;
            if (!tagName) {
                return true;
            }
            if (tocTags.includes(tagName.toUpperCase())) {
                index++;
                let id = "toc" + index;
                item.setAttribute("id", id);
                tocConfig.value.tocArray.push({
                    id: id,
                    title: item.innerText,
                    level: Number.parseInt(tagName.substring(1))
                })

            }
        })
    })
}

const getTreeBlogId = (blogId) => {
    nextTick(() => {
        getBlogDetail(blogId)
    })
}

const highlightCode = () => {
    nextTick(() => {
        //高亮显示
        let blocks = document.querySelectorAll("pre code");
        
        blocks.forEach((block) => {
            hljs.highlightBlock(block);
        });
    });
}
</script>

<style lang="scss" scoped>
.special-blog {
    width: 100%;
    min-height: 100%;
    display: flex;

    .blog-toc {
        position: fixed;
        top: 80px;
        right: 20px;
        z-index: 99;
        width: 300px;
        min-height: 60px;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #eee;

        .toc-head {
            display: flex;
            align-items: center;
            height: 60px;
            width: 100%;
            box-sizing: border-box;
            border-bottom: 1px solid #eee;
            padding: 10px;

            .title {
                font-size: 18px;
                flex: 1;
            }

            .ant-btn {
                // width: 48px;
                // height: 24px;
            }
        }

        .toc-main {
            .toc-item {
                padding: 10px 0;
            }
        }
    }
}
</style>